<template>
    <el-container>
        <el-tabs type="border-card" class="Wh" @tab-click="onClick">
            <el-tab-pane label="未推荐" class="Wh">   
                <el-header>
                    <video-search :handleSearch="handleSearch" :tabE="0"></video-search>
                </el-header>
                <el-main class="main">
                    <video-list :vdData="vdData" :totalS="total" :tabE="0" :refreshFlag="refreshFlag"></video-list>
                </el-main>
            </el-tab-pane>
            <el-tab-pane label="已推荐" class="Wh">       
                <el-header>
                    <video-search :handleSearch="handleSearch" :tabE="1"></video-search>
                </el-header>
                <el-main class="main">
                    <video-list :vdData="vdDataT" :totalS="total" :tabE="tabP=1" :refreshFlag="refreshFlag"></video-list>
                </el-main>
            </el-tab-pane>
            <el-tab-pane label="已下架" class="Wh">       
                <el-header>
                    <video-search :handleSearch="handleSearch" :tabE="2"></video-search>
                </el-header>
                <el-main class="main">
                    <video-list :vdData="vdDataX" :totalS="total" :tabE="tabP=2" :refreshFlag="refreshFlag"></video-list>
                </el-main>
            </el-tab-pane>
        </el-tabs>
    </el-container>
</template>

<script>
import videoSearch from './videoSearch.vue';
import videoList from './videoList.vue';
export default {
    data() {
    return {
        vdData: [],
        vdDataT:[],
        vdDataX:[],
        total:0,
        refreshFlag: false,
    };
  },
    components: {
        videoSearch:videoSearch,
        videoList:videoList,
    },
    created(){
        
    },
    methods: {
    handleSearch(res,bs) {
        if(bs==0){
            this.vdData = res.data.data.content
            this.total = res.data.data.totalSize
           
        }else if(bs==1){
            this.vdDataT = res.data.data.content
            this.total = res.data.data.totalSize
            
        }else{
            this.vdDataX = res.data.data.content
            this.total = res.data.data.totalSize
            
        }
    },

    onClick() {
        // 切换 refreshFlag 的值来触发 video-list 组件刷新
        this.refreshFlag = !this.refreshFlag;
    }
    
  }
}
</script>

<style scoped>
.main{
    margin-top: 40px;
}
.Wh{
    width: 100%;
}
</style>